<template>
  <div class="partition-management">
    <div class="card">
      <div class="card-header">
        <h2>分区管理</h2>
        <button class="btn-add" @click="showAddDialog">
          <i class="icon-plus"></i> 添加分区
        </button>
      </div>

      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>分区ID</th>
            <th>分区名称</th>
            <th>描述</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="partition in partitions" :key="partition.pid">
            <td>{{ partition.pid }}</td>
            <td>{{ partition.name }}</td>
            <td>{{ partition.description }}</td>
            <td>{{ $formatDate(partition.createTime) }}</td>
            <td>
              <button class="btn-edit" @click="editPartition(partition)">
                <i class="icon-edit"></i>
              </button>
              <button
                  class="btn-delete"
                  @click="deletePartition(partition.pid)"
                  :disabled="partition.pid <= 5"
              >
              <i class="icon-trash"></i>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 添加/编辑分区对话框 -->
      <div class="dialog-overlay" v-if="showPartitionDialog">
        <div class="dialog">
          <h3>{{ isEditing ? '编辑分区' : '添加新分区' }}</h3>
          <div class="form-group">
            <label>分区名称</label>
            <input type="text" v-model="currentPartition.name">
          </div>
          <div class="form-group">
            <label>分区描述</label>
            <textarea v-model="currentPartition.description"></textarea>
          </div>
          <div class="dialog-actions">
            <button class="btn-cancel" @click="cancelPartition">取消</button>
            <button class="btn-confirm" @click="savePartition">
              {{ isEditing ? '保存' : '添加' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessage, ElMessageBox} from 'element-plus'
import {formatDate} from "date-fns/format";

export default {
  name: 'PartitionManagement',
  data() {
    return {
      partitions: [],
      showPartitionDialog: false,
      isEditing: false,
      loading: false,
      currentPartition: {
        pid: null,
        name: '',
        description: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入分区名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入分区描述', trigger: 'blur' },
          { min: 5, max: 100, message: '长度在5到100个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchPartitions()
  },
  // 修改PartitionManagement.vue中的方法
  methods: {
    formatDate,
    async fetchPartitions() {
      try {
        const response = await this.$http.get('/admin/allPartition')
        this.partitions = response.data // 注意访问response.data
      } catch (error) {
        console.error('获取分区列表失败:', error)
        this.$message.error('获取分区列表失败')
      }
    },

    async savePartition() {
      try {
        if (this.isEditing) {
          await this.$http.put('/admin/updatePartition', this.currentPartition)
          ElMessage.success('分区更新成功')
        } else {
          await this.$http.post('/admin/addPartition', this.currentPartition)
          ElMessage.success('分区添加成功')
        }
        this.showPartitionDialog = false
        this.fetchPartitions()
      } catch (error) {
        console.error('保存分区失败:', error)
        ElMessage.error('保存分区失败: ' + (error.response?.data?.message || error.message))
      }
    },

    async deletePartition(pid) {
      try {
        await ElMessageBox.confirm('确定要删除此分区吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        await this.$http.delete('/admin/deletePartition', null, {
          params: { pid }
        })

        ElMessage.success('分区删除成功')
        this.fetchPartitions()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除分区失败:', error)
          ElMessage.error('删除分区失败: ' + (error.response?.data?.message || error.message))
        }
      }
    },
  }
}
</script>

<style scoped>
.partition-management {
  padding: 20px;
}

.btn-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #b0bec5;
}
</style>